console.log("main.js run");

/**
 * 页面加载完成后执行
 */
$(document).ready(function () {
	console.log("page load");

	// 异步加载分类
	loadCategory();

	// 当鼠标移上时，加载该分类下的商品
	loadGoodsByCategory();
});


/**
 * 异步加载分类
 */
function loadCategory() {

	$.ajax({
		type: "POST",// 请求的方式默认为get 改为Post
		url: "/shopping/CategoryServlet",// 往服务器端请求的地址 写成绝对路径
		data: {
			method: "loadCategory"
		},// 往服务器端发送的数据
		// 接受服务器端数据函数 回调函数
		success: function (data) {
			// data是服务器返回的数据
			if (data != "") {
				// 解析字符串，进行把分类添加到页面
				addCategoryData(data);
			} else {
				console.log("服务器端异常请稍后再试");
			}
		}
	});
}

/**
 * 解析字符串，进行把分类添加到页面
 * 
 * @param {*}
 *            jsonStr
 */
function addCategoryData(jsonStr) {
	if (jsonStr == null) {
		console.log("没有数据");
		return;
	}

	var arr = eval(jsonStr);// 把json字符串变成json数组
	$.each(arr, function (key, value) {
		var li_list = '<li id="liid"><a id="' + value.cid + '" href="">'
			+ value.cname + '</a><div class="pop"></div></li>';

		$("#ul_category").append(li_list);

	});
}

/**
 * 当鼠标移上时，加载该分类下的商品 通过分类异步查询商品
 */
function loadGoodsByCategory() {

	console.log("loadGoodsByCategory");

	// 为每个分类动态添加事件
	$("#ul_category").on("mouseover", "li", function () {
		console.log("mouseover");

		var aLable = $(this).children(); // 获取li下的a标签
		var idValue = aLable.attr("id");

		// 进行异步查询该分类下的商品
		$.ajax({
			type: "POST",// 请求的方式默认为get 改为Post
			url: "/shopping/GoodsServlet",// 往服务器端请求的地址 写成绝对路径
			data: {
				method: "findGoodsByMain",
				cid: idValue
			},// 往服务器端发送的数据
			// 接受服务器端数据函数 回调函数
			success: function (data) {
				// data是服务器返回的数据
				if (data != "") {
					// 解析字符串，进行把分类下的商品添加到页面
					addGoodsByCategoryData(data);
				} else {
					console.log("服务器端异常请稍后再试");
				}
			}
		});

		console.log("mouseover");
	});
}

/**
 * 解析字符串，进行把分类下的商品添加到页面
 * @param {*} jsonStr 
 */
function addGoodsByCategoryData(jsonStr) {
	console.log("jsonStr = " + jsonStr);

	if (jsonStr == null) {
		console.log("没有数据");
		return;
	}

	var arr = eval(jsonStr);// 把json字符串变成json数组
	$.each(arr, function (key, value) {
		var li_list = '<div class="left fl">' +
			'<div>' +
			'<div class="xuangou_left fl">' +
			'	<a href="${pageContext.request.contextPath}/jsps/order/desc.jsp">' +
			'	<div class="img fl">' +
			'		<img src="${pageContext.request.contextPath}/image/xm6_80.png" alt="商品图片">' +
			'	</div>' +
			'	<span class="fl">小米6</span>' +
			'	<div class="clear"></div>' +
			'	</a>' +
			'</div>' +
			'<div class="xuangou_right fr"><a href="./xiangqing.html" target="_blank">选购</a></div>' +
			'<div class="clear"></div>' +
			'</div >' +
			'</div > ';

		$("#ul_category").append(li_list);

	});
}
